<template>
    <div id="UserInformation"
        :style="{ 'transition': isCollapse ? '.6s all' : '.35s all', 'width': isCollapse ? myWidth1 : myWidth2 }">
        <div class="main" :style="{'height':myHeight}">

            <div class="s_top">
                <div class="serach">
                    <el-row>
                        <el-col :span="4" style="text-align: right;padding-right: 10px;font-size: 13px;">
                            账号
                        </el-col>
                        <el-col :span="20">
                            <el-input v-model="serach.serachName" placeholder="请输入内容"></el-input>
                        </el-col>
                        
                    </el-row>
                </div>
                <el-button size="mini" style="margin-left:10px" @click="pageNum = 1; init();">重置</el-button>
                <el-button type="primary" size="mini" @click="forSerach">搜索</el-button>
            
                <el-button type="primary" class="btn_excel" style="margin-left: 2px;" @click="forExcel">导出为Excel</el-button>
                <el-button type="success" class="btn_excel" style="margin-right: 0px;" @click="addUser">添加数据</el-button>
            </div>

            <el-table 
                :data="tableData" 
                stripe 
                style="width: 100%"
                :height="myHeight-50"
                id="excel"
                >
                <el-table-column type="index" width="50">
                </el-table-column>
                <el-table-column prop="username" label="账号">
                </el-table-column>
                <el-table-column prop="password" label="密码">
                   <div>************</div>
                </el-table-column>
                <el-table-column prop="phone" label="电话">
                </el-table-column>
                <el-table-column prop="role" label="身份">
                    <template >
                        <el-tag type="primary" disable-transitions>学生</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" v-if="!notforexcel">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="updateUser(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block" style="background-color:#ffffff">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNum"
                    :page-size="pageSize" layout="prev, pager, next, jumper" :total="sumNum">
                </el-pagination>
            </div>
        </div>



        <!-- 编辑打开的表格 -->
        <el-drawer :title="title" :visible.sync="drawer" direction="rtl" :before-close="handleClose">
            <el-form ref="form" :model="updateData" label-width="80px" style="padding-right: 20px;">
                <el-form-item label="账号">
                    <el-input v-model="updateData.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="updateData.password"  placeholder="**********"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="updateData.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary"  @click="onUpdate">修改</el-button>
                    <el-button @click="drawer=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>

        <!-- 添加数据打开的表格 -->
        <el-drawer :title="title" :visible.sync="drawer2" direction="rtl" :before-close="handleClose">
            <el-form ref="form" :model="newData" label-width="80px" style="padding-right: 20px;">
                <el-form-item label="账号">
                    <el-input v-model="newData.userData.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="newData.userData.password" placeholder="**********"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="newData.userData.phone"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="newData.infoData.name"></el-input>
                </el-form-item>
                <el-form-item label="学号">
                    <el-input v-model="newData.infoData.number"></el-input>
                </el-form-item>
        
                <el-form-item>
                    <el-button type="primary" @click="onAdd">添加</el-button>
                    <el-button @click="drawer2=false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </div>
</template>
<script>
import axios from 'axios';
import Qs from 'qs'
export default {
    data(){
        return{
            sumNum: 0,
            pageSize: 10,
            pageNum: 1,//现在的页数
            title: "",
            updateData: {
                uid:"",
                username: "",
                password: "",
                phone: "",
            },//编辑表格中的信息
            drawer: false,//编辑表格是否打开
            drawer2: false,
            notforexcel: false,
            serach:{
                serachName:"",
                serachRole:"",
            },
            newData:{
                userData:{
                    username:"",
                    phone:"",
                    password:""
                },
                checkData:{

                },
                infoData:{
                    name:"",
                    number:""
                }
            },
            tableData: [],
            allData:[]
        }
    },
    props:{
        isCollapse: true,
        userdetail: {},
        studentdetail: {},
    },
    methods:{
        handleSizeChange(val) {//页的大小改变时触发
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {//当前页切换时触发
            // console.log(`当前页: ${val}`);
            var _this = this;
            axios({
                method: "get",
                url: "api/users/getAllUser?PageSize=" + _this.pageSize + "&pageNum=" + val
            }).then(function (resp) {
                _this.tableData = resp.data.data.data;
                _this.tableData.role = 0;
            })
        },
        forSerach() {
            if (this.serach.serachName == "" && this.serach.serachRole == "") {
                this.$message('请输入内容！');
            } else {
                // console.log(this.serach);
                var _this=this;
                axios({
                    method: "post",
                    url: "api/users/getByLikeUsername",
                    data:{
                        username: _this.serach.serachName
                    }
                }).then(function (resp) {
                    console.log(resp.data);
                    _this.tableData = resp.data.data.data;
                    _this.tableData.role = 0;
                    _this.pageNum=1;
                    _this.serach.serachName="";
                    _this.sumNum = resp.data.data.totalNum;
                })
                this.serach.userName="";
            }

        },
        updateUser(index,row){
            this.drawer = !this.drawer;
            this.updateData = {
                uid: "",
                username: "",
                password: "",
                phone: "",
            }
            this.updateData.username=row.username;
            this.updateData.uid=row.uid;
            this.updateData.phone=row.phone;
            // console.log(row);
        },
        onUpdate(){
            if (this.updateData.username == "" || this.updateData.phone == ""||this.updateData.password=="") {
                this.$message("请输入规范内容")
            } else {
                //数据库操作
                var _this=this;
                console.log(this.updateData);
                axios({
                    method: "put",
                    url: "api/users/updateUser",
                    data:_this.updateData
                }).then(function (resp) {
                    if(resp.data.code==200){
                        _this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        _this.pageNum = 1;
                        _this.init();
                    }else{
                        _this.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                    
                })
                this.drawer = !this.drawer;
            }
        },
        addUser(){
            //消除上一次的残留数据
            this.newData = {
                userData: {
                    username: "",
                    phone: "",
                    password: ""
                },
                checkData: {

                },
                infoData: {
                    name: "",
                    number: ""
                }
};
            this.drawer2 = !this.drawer2;
        },
        onAdd(){
            if (this.newData.userData.username == "" || this.newData.userData.password == "" || this.newData.userData.phone == "" || this.newData.infoData.name == "" || this.newData.infoData.number == "") {
                this.$message("请输入规范内容")
            } else {
                //数据库操作
                var _this=this;
                // axios({
                //     method: "post",
                //     url: "api/users/register",
                //     data:_this.newData.userData
                // }).then(function (resp) {
                //    if(resp.data.code==200){
                //        axios({
                //            method: "post",
                //            url: "api/users/getByLikeUsername",
                //            data: {
                //                username: _this.newData.username
                //            }
                //        }).then(function (resp) {
                //             var uid=resp.data.data.data.uid;

                //        })
                //    }else{
                //        _this.$message({
                //                 message: resp.data.msg,
                //                 type: 'error'
                //             });
                //    }
                // })
                _this.$message({
                    message: '添加成功',
                    type: 'success'
                });
                console.log(this.newData);
            }
        },
        deleteUser(index,row){
            this.tableData.splice(index, 1);
           console.log(row);
            var _this = this;

            axios({
                method: "get",
                url: "api/users/getInfoByUid/"+row.uid
            }).then(function (resp) {
                var data=resp.data.data;
                // console.log(data);
                axios({
                    method: "delete",
                    url: "api/users/deleteUserById/" + data.userGetCheckTDO.userGetTDO.uid
                }).then(function (resp) {
                    if (resp.data.code == 200) {
                        axios({
                            method: "delete",
                            url: "api/users/deleteCheckById/" + data.userGetCheckTDO.cid,
                        }).then(function (resp) {
                            if (resp.data.code == 200) {
                                axios({
                                    method: "delete",
                                    url: "api/users/deleteInfoById/" + data.iid,
                                    
                                }).then(function (resp) {
                                    if (resp.data.code == 200) {
                                        _this.$message({
                                            message: '删除成功',
                                            type: 'success'
                                        });
                                        _this.pageNum = 1;
                                        _this.init();
                                    } else {
                                        _this.$message({
                                            message: resp.data.msg,
                                            type: 'error'
                                        });
                                    }
                                })
                            } else {
                                _this.$message({
                                    message: resp.data.msg,
                                    type: 'error'
                                });
                            }

                        })
                    } else {
                        _this.$message({
                            message: resp.data.msg,
                            type: 'error'
                        });
                    }
                })
            })
        },
        init(){
            var _this=this;
            axios({
                method: "get",
                url: "api/users/getAllUser?PageSize=1000&pageNum=1",
            }).then(function (resp) {
                // _this.tableData = resp.data.data.data;
                // _this.tableData.role=0;
                _this.sumNum = resp.data.data.totalNum;
                _this.allData = resp.data.data.data;
                _this.allData.role = 0;
            })
           
            axios({
                method: "get",
                url: "api/users/getAllUser?PageSize=" + _this.pageSize + "&pageNum=" + _this.pageNum
            }).then(function (resp) {
                _this.tableData = resp.data.data.data;
                _this.tableData.role = 0;
            })
        },
        forExcel() {

            var temp = this.tableData;
            this.tableData = this.allData
            this.notforexcel = !this.notforexcel;
            this.$nextTick(() => {
                this.Excels.exportExcel("导出数据.xlsx", "#excel");  //此括号里面（第一个是导出文件的名称，第二个是需要导出的标签的id）
                this.notforexcel = !this.notforexcel;
                this.tableData = temp;
            })
        },
        handleClose(done) {
            this.$confirm('还未保存是否关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
    },
    mounted(){
        this.init();
    },
    created(){
        //两者是等效的
        // console.log(document.documentElement.clientHeight);
        //乘2得到的是文档高度 单位px
        // console.log(window.innerHeight);
        this.myHeight = window.innerHeight - 40 - 40 - 20 - 30 + "";
        this.myWidth1 = window.innerWidth - 64 - 30 + "px"
        this.myWidth2 = window.innerWidth - 200 - 30 + "px"
    }

}
</script>

<style scoped>
#UserInformation{
    float: left;
    height: 500px;
}
#UserInformation .main{
    width: 100%;
    margin-top: 15px;
}
#UserInformation .main .s_top {
    text-align: initial;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}
.serach {
    width: 300px;
    height: 100%;
    float: left;
}

.btn_excel {
    float: right;
    margin-top: 5px;
    margin-right: 10px;
}
</style>